<!DOCTYPE html>
<html>
<head>
    <title>Oil Manage Login and Registration</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-image: url('background.jpg'); /* 设置背景图片 */
            background-size: cover;
            background-position: center;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        .container {
            background: rgba(255, 255, 255, 0.8);
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
            width: 300px;
        }
        h2 {
            text-align: center;
        }
        form {
            display: grid;
            gap: 10px;
            padding: 10px;
        }
        input, button, select {
            padding: 10px;
            width: 100%;
            box-sizing: border-box;
        }
        .hidden {
            display: none;
        }
        #backButton, #registerButton {
            margin-top: 10px;
        }
    </style>
    <script>
        function showRegisterForm() {
            document.getElementById('loginForm').classList.add('hidden');
            document.getElementById('registerForm').classList.remove('hidden');
        }

        function showLoginForm() {
            document.getElementById('registerForm').classList.add('hidden');
            document.getElementById('loginForm').classList.remove('hidden');
        }

        // 添加注册函数
        async function registerUser() {
            const username = document.getElementById('registerUsername').value;
            const password = document.getElementById('registerPassword').value;
            const userSex = document.getElementById('registerUserSex').value;

            const user = {
                userName: username,
                password: password,
                userSex: parseInt(userSex)
            };

            try {
                const response = await fetch('/oil-manage/insertUser', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(user)
                });
                const result = await response.json();
                if (response.ok) {
                    alert('Registration successful');
                    showLoginForm();
                } else {
                    alert('Registration failed: ' + result.message);
                }
            } catch (error) {
                alert('Error: ' + error);
            }
        }
    </script>
</head>
<body>
<div class="container">
    <div id="loginForm" class="form-section">
        <h2>Login</h2>
        <form action="/oil-manage/checkLogin" method="post">
            <input type="text" name="username" placeholder="Username" required>
            <input type="password" name="password" placeholder="Password" required>
            <button type="submit">Login</button>
            <button type="button" id="registerButton" onclick="showRegisterForm()">Register</button>
        </form>
    </div>

    <div id="registerForm" class="form-section hidden">
        <h2>Register</h2>
        <input id="registerUsername" type="text" placeholder="Username" required>
        <input id="registerPassword" type="password" placeholder="Password" required>
        <select id="registerUserSex">
            <option value="1">男</option>
            <option value="2">女</option>
        </select>
        <button type="button" onclick="registerUser()">Register</button>
        <button type="button" id="backButton" onclick="showLoginForm()">Back to Login</button>
    </div>
</div>
</body>
</html>